<template>
  <div class="leader">
    <div class="bigbox" style="padding-bottom: 0">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <router-link to="/switch"
            ><img to="/switch" src="../assets/image/18695.png"
          /></router-link>
        </div>
        <div class="h-title">熊猫看书</div>
        <div class="h-right">
          <router-link to="/personal">书架</router-link>

          <router-link to="/search" class="h-search"></router-link>
        </div>
      </header>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li>
            <router-link to="home">首页</router-link>
          </li>
          <li class="active">
            <router-link to="leader">排行</router-link>
          </li>
          <li>
            <router-link to="classify">分类</router-link>
          </li>
          <li>
            <router-link to="schoolboy">男生</router-link>
          </li>
          <li>
            <router-link to="schoolgirl">女生</router-link>
          </li>
        </ul>
      </nav>
      <!-- 男生榜 -->
      <div class="man">
        <i class="man-i"></i>
        男生榜
      </div>
      <!-- 男生畅销榜 -->
      <div class="box">
        <div class="all-title clearfix">
          男生畅销榜
          <router-link to="/schoolboy">
            <span class="title-more"></span>
          </router-link>
        </div>
        <bestselling></bestselling>
      </div>
      <!-- 男生潜力榜 -->
      <div class="box2" style="margin-top: 10px">
        <div class="all-title clearfix">
          男生潜力榜
          <router-link to="/schoolboy">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>近身狂医</li>
            <li>美女院长</li>
            <li>贴身校花</li>
          </ul>
        </div>
      </div>
      <!-- 男生连载榜 -->
      <div class="box3" style="margin-top: 10px">
        <div class="all-title clearfix">
          男生连载榜
          <router-link to="/schoolboy">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>偷香高手</li>
            <li>武道大帝</li>
            <li>绝品狂少</li>
          </ul>
        </div>
      </div>
      <!-- 男生完本榜 -->
      <div class="box4" style="margin-top: 10px">
        <div class="all-title clearfix">
          男生完本榜
          <router-link to="/schoolboy">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>火爆兵王</li>
            <li>近战保镖</li>
            <li>绝世武神</li>
          </ul>
        </div>
      </div>
      <!-- 女生榜 -->
      <div class="girl">
        <i class="girl-i"></i>
        女生榜
      </div>
      <!-- 女生畅销榜 -->
      <div class="box">
        <div class="all-title clearfix">
          女生畅销榜
          <router-link to="/schoolgirl">
            <span class="title-more"></span>
          </router-link>
        </div>
        <bestselling></bestselling>
      </div>
      <!-- 女生潜力榜 -->
      <div class="box2" style="margin-top: 10px">
        <div class="all-title clearfix">
          女生潜力榜
          <router-link to="/schoolgirl">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>穆少追妻</li>
            <li>惹爱成瘾</li>
            <li>庶女惊华</li>
          </ul>
        </div>
      </div>
      <!-- 女生连载榜 -->
      <div class="box3" style="margin-top: 10px">
        <div class="all-title clearfix">
          女生连载榜
          <router-link to="/schoolgirl">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>总裁宠妻</li>
            <li>神秘娇妻</li>
            <li>庶女惊华</li>
          </ul>
        </div>
      </div>
      <!-- 女生完本榜 -->
      <div class="box4" style="margin-top: 10px">
        <div class="all-title clearfix">
          女生完本榜
          <router-link to="/schoolgirl">
            <span class="title-more"></span>
          </router-link>
        </div>
        <div class="type-choose">
          <ul>
            <li>庶女毒妃</li>
            <li>神医傻妃</li>
            <li>狼性总裁</li>
          </ul>
        </div>
      </div>
      <!-- 页脚搜索框 -->
      <router-link to="/search">
        <div class="m-search">
          <!-- 输入框 -->
          <div class="inp">
            <input type="text" placeholder="书名" />
          </div>
          <!-- 放大镜 -->
          <div class="magnifier"></div>
        </div>
      </router-link>
      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>
import footermodule from "../components/FooterModule.vue";
import bestselling from "../components/BestSelling.vue";
export default {
  components: {
    footermodule,
    bestselling,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/second.css";
</style>